<!DOCTYPE html>
<html lang="en">
<head>
    <style>
.channels {
    /*			主体框架*/
    width: 1350px;
    height: 825px;
    overflow: hidden;
}

.floorhd {
    /*			主标题栏*/
    height: 65px;
    background: #F4F4F4;
}


.floorhd_title_img1{
            background-position-x: 0px;
            background-position-y: 0px;
            left: 0;
            width: 25px;
            height: 20px;
            position: absolute;
            top: 50%;
            margin-top:-10px;
        }
.floorhd_title_img2{
            background-position-x: -25px;
            background-position-y: 0px;
            right: 0;
            width: 25px;
            height: 20px;
            position: absolute;
            top: 50%;
            margin-top:-10px;
        }

.grid_c1 {
    /*			限宽栏*/
    margin: 0 auto;
    width: 1205px;
}

.floorhd_tit {
    /*			标题栏*/
    position: relative;
    width: 200px;
    height: 45px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    line-height: 45px;
    padding: 0 30px;
    margin: 0 auto 20px;
    overflow: hidden;
    color: #333;
}

.channels .slider {
    /*			大板块*/
    position: relative;
}

.channels .slider_list {
    /*			主板快*/
    width: 1205px;
    height: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.channels_block_1 {
    /*			物品推荐分栏*/
    float: left;
    height: 378px;
    width: 300px;
}

.channels_block_2 {
    /*			物品推荐1/2分栏*/
    float: left;
    background-color: #F4F4F4;
    height: 188px;
    width: 300px;
}

.channels_block_2_content {
    /*			物品推荐1/2分栏*/
    float: left;
    background-color: white;
    height: 182px;
    width: 292px;
}

.channels_block_title {
    /*			物品推荐1/2分栏标题*/
    display: block;
    height: 30px;
    margin-left: 30px;
    margin-right: 10px;
    padding-top: 17px;
    padding-bottom: 13px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels_block_title_main {
    /*			主标题*/
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.channels_block_title_aside {
    /*			副标题*/
    font-size: 14px;
    color: #999;
    margin-left: 5px;
}

.channels_block_imgs {
    /*			两张图片盒子*/
    font-size: 0;
    line-height: 0;
}

.channels_block_link {
    /*			单张图片盒子*/
    position: relative;
    padding-left: 23.5px;
    display: inline-block;
}

.channels_block_link_left {
    /*			左侧图片盒子*/
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 20px;
}

.channels_block_link_right {
    /*			右侧图片盒子*/
    width: 100px;
    height: 100px;
    float: right;
    margin-right: 20px;
}

.slider_list_bottom {
    /*			将主板块分成上下两个板块*/
    height: 378px;
}

body {
    background: #F4F4F4;
    font-size: 12px;
    font-weight: 400;
}

img {
    transition: all 0.3s;
}

img:hover {
    opacity: 0.7;
    transition: all 0.4s;
}
.lazying_img{
    width: 100px;
    height: 100px;
}

a {
    text-decoration: none
}

.elevator_fix {
    position: fixed;
    top: 75px;
}

.elevator {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 615px;
}

li {
    list-style: none;
}

.elevator_lk {
    position: relative;
    display: block;
    width: 28px;
    height: 38px;
    line-height: 19px;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
    background: #fff;
}

.elevator_totop {
    display: block;
    height: 50px;
    padding-top: 10px;
    color: #e1251b;
    background: #fff;
    text-align: center;
}

.elevator_totop_txt {
    display: block;
    height: 18px;
    line-height: 18px;
    font-size: 14px;
}

    </style>
    <meta charset="UTF-8">
    <title>06马利雯实验一_视图层设计开发（一）：综合使用CSS+div元素的布局实现京东部分页面的设计</title>  
</head>
<body>
<div class="channels">
    <div class="floorhd">
        <div class="grid_c1 floorhd_inner">
            <h3 class="floorhd_tit">
                <img class="floorhd_title_img1" src="image\标题1.png">
                频道广场
                <img class="floorhd_title_img2" src="image\标题2.png"></h3>
        </div>
    </div>
    <div class="slider">
        <div class="slider_list">
            <div class="channels_block_1"><a href="https://channel.jd.com/furniture.html"> <img src="image\家具.png"></a>
            </div>
            <div class="channels_block_1"><a href="https://book.jd.com/"> <img src="image\生鲜馆.png"></a></div>
            <div class="channels_block_2">
                <div class="channels_block_2_content"><a class="channels_block_title"
                                                         href="https://che.jd.com/?skuId=6938201_6885554&groupId=03312682&productId=09166813">
                    <span class="channels_block_title_main">京东手机</span> <span class="channels_block_title_aside">一个极客的诞生</span></a>
                    <div class="channels_block_imgs">
                        <div class="channels_block_link"><a class="channels_block_link_left"
                                                            href="https://che.jd.com/?skuId=6938201_6885554&groupId=03312682&productId=09166813">
                            <img class="lazying_img" src="image\131.png"></a></div>
                        <div class="channels_block_link"><a class="channels_block_link_right"
                                                            href="https://che.jd.com/?skuId=6938201_6885554&groupId=03312682&productId=09166813">
                            <img class="lazying_img" src="image\132.png"></a></div>
                    </div>
                </div>
            </div>
            <div class="channels_block_2">
                <div class="channels_block_2_content"><a class="channels_block_title"
                                                         href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                    <span class="channels_block_title_main">海囤全球</span> <span class="channels_block_title_aside">京东旗下全球直购平台</span></a>
                    <div class="channels_block_imgs">
                        <div class="channels_block_link"><a class="channels_block_link_left"
                                                            href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                            <img class="lazying_img" src="image/141.png"></a></div>
                        <div class="channels_block_link"><a class="channels_block_link_right"
                                                            href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                            <img class="lazying_img" src="image/142.png"></a></div>
                    </div>
                </div>
            </div>
            <div class="channels_block_2">
                <div class="channels_block_2_content"><a class="channels_block_title"
                                                         href="https://jdjz.jd.com/?skuId=7360425_100001757375&groupId=03312682&productId=09165677">
                    <span class="channels_block_title_main">京东京造</span> <span
                        class="channels_block_title_aside">京东自有品牌</span></a>
                    <div class="channels_block_imgs">
                        <div class="channels_block_link"><a class="channels_block_link_left"
                                                            href="https://jdjz.jd.com/?skuId=7360425_100001757375&groupId=03312682&productId=09165677">
                            <img class="lazying_img" src="image/151.png"></a></div>
                        <div class="channels_block_link"><a class="channels_block_link_right"
                                                            href="https://jdjz.jd.com/?skuId=7360425_100001757375&groupId=03312682&productId=09165677">
                            <img class="lazying_img" src="image/152.png"></a></div>
                    </div>
                </div>
            </div>
            <div class="channels_block_2">
                <div class="channels_block_2_content"><a class="channels_block_title"
                                                         href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                    <span class="channels_block_title_main">电脑办公</span> <span class="channels_block_title_aside">科技潮物 惠享不停</span></a>
                    <div class="channels_block_imgs">
                        <div class="channels_block_link"><a class="channels_block_link_left"
                                                            href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                            <img class="lazying_img" src="image/161.png"></a></div>
                        <div class="channels_block_link"><a class="channels_block_link_right"
                                                            href="https://www.jd.hk/?skuId=100001553181_100000958776&groupId=03312682&productId=03017031">
                            <img class="lazying_img" src="image/162.png"></a></div>
                    </div>
                </div>
            </div>
            <div class="slider_list_bottom"></div>
            <div class="slider_list_bottom">
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://b.jd.com/?skuId=100001689066_7507189&groupId=03312682&productId=09180689">
                        <span class="channels_block_title_main">企业购</span> <span class="channels_block_title_aside">让采购更简单</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://b.jd.com/?skuId=100001689066_7507189&groupId=03312682&productId=09180689">
                                <img class="lazying_img" src="image/211.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://b.jd.com/?skuId=100001689066_7507189&groupId=03312682&productId=09180689">
                                <img class="lazying_img" src="image/212.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://health.jd.com/?skuId=3649920_10846297558&groupId=03312682&productId=09168077">
                        <span class="channels_block_title_main">生鲜馆</span> <span class="channels_block_title_aside">尝遍天下鲜</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://health.jd.com/?skuId=3649920_10846297558&groupId=03312682&productId=09168077">
                                <img class="lazying_img" src="image/221.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://health.jd.com/?skuId=3649920_10846297558&groupId=03312682&productId=09168077">
                                <img class="lazying_img" src="image/222.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://imall.jd.com/?skuId=100003838571_46537953957&groupId=03312682&productId=10041623">
                        <span class="channels_block_title_main">家用电器</span> <span class="channels_block_title_aside">买家电上京东</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://imall.jd.com/?skuId=100003838571_46537953957&groupId=03312682&productId=10041623">
                                <img class="lazying_img" src="image/231.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://imall.jd.com/?skuId=100003838571_46537953957&groupId=03312682&productId=10041623">
                                <img class="lazying_img" src="image/232.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://yiyao.jd.com/?skuId=7112506_3091780&groupId=03312682&productId=09170698">
                        <span class="channels_block_title_main">家装城</span> <span class="channels_block_title_aside">用心装好家一站式装齐</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://yiyao.jd.com/?skuId=7112506_3091780&groupId=03312682&productId=09170698">
                                <img class="lazying_img" src="image/241.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://yiyao.jd.com/?skuId=7112506_3091780&groupId=03312682&productId=09170698">
                                <img class="lazying_img" src="image/242.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://hellojoy.jd.com/?itemid=83&activityId=32v4xquKqa12S1A2ngDeNMEuj6pn&linkIds=2889907,100005152864">
                        <span class="channels_block_title_main">JOY寻宝</span> <span class="channels_block_title_aside">懂你的JOY</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://hellojoy.jd.com/?itemid=83&activityId=32v4xquKqa12S1A2ngDeNMEuj6pn&linkIds=2889907,100005152864">
                                <img class="lazying_img" src="image/311.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://hellojoy.jd.com/?itemid=83&activityId=32v4xquKqa12S1A2ngDeNMEuj6pn&linkIds=2889907,100005152864">
                                <img class="lazying_img" src="image/312.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://fresh.jd.com/?skuId=5682158_7785707&groupId=03312682&productId=09649880">
                        <span class="channels_block_title_main">京东超市</span> <span class="channels_block_title_aside">一站式囤生活好物</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://fresh.jd.com/?skuId=5682158_7785707&groupId=03312682&productId=09649880">
                                <img class="lazying_img" src="image/321.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://fresh.jd.com/?skuId=5682158_7785707&groupId=03312682&productId=09649880">
                                <img class="lazying_img" src="image/322.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://food.jd.com/?skuId=1528336_964416&groupId=03312682&productId=09173033">
                        <span class="channels_block_title_main">京东美妆</span> <span class="channels_block_title_aside">京东美妆，懂你的美</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://food.jd.com/?skuId=1528336_964416&groupId=03312682&productId=09173033">
                                <img class="lazying_img" src="image/331.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://food.jd.com/?skuId=1528336_964416&groupId=03312682&productId=09173033">
                                <img class="lazying_img" src="image/332.png"></a></div>
                        </div>
                    </div>
                </div>
                <div class="channels_block_2">
                    <div class="channels_block_2_content"><a class="channels_block_title"
                                                             href="https://book.jd.com/?skuId=12584448_12416016&groupId=03312682&productId=09939369">
                        <span class="channels_block_title_main">大药房</span> <span class="channels_block_title_aside">购正品药，免费换新</span></a>
                        <div class="channels_block_imgs">
                            <div class="channels_block_link"><a class="channels_block_link_left"
                                                                href="https://book.jd.com/?skuId=12584448_12416016&groupId=03312682&productId=09939369">
                                <img class="lazying_img" src="image/341.png"></a></div>
                            <div class="channels_block_link"><a class="channels_block_link_right"
                                                                href="https://book.jd.com/?skuId=12584448_12416016&groupId=03312682&productId=09939369">
                                <img class="lazying_img" src="image/342.png"></a></div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
</body>
</html>
